<template>
  <div class="video-page flex">
    <div class="video-page-left">
      <img src="@/assets/images/logo.png" alt="" />
    </div>

    <div class="video-page-right">
      <div style="overflow-y: scroll; height: calc(100% - 60px)">
        <div class="video-page-right-top flex">
          <div class="video-page-right-top-left flex center">
            <img :src="props.video.img" />
            <span>{{ props.video.name }}</span>
          </div>

          <div class="video-page-right-top-right">关注</div>
        </div>

        <div class="video-page-right-main">
          <div class="video-page-right-main-title">{{ props.video.title }}</div>
          <div class="video-page-right-main-content">
            {{ props.video.content }}#测试
          </div>
          <div class="video-page-right-main-time flex">
            <span>2024-12-23 湖南</span>
            <i class="iconfont icon-sandian"></i>
          </div>
        </div>

        <!-- 评论列表 -->
        <CommentList :comment="props.video.reply" />
      </div>

      <div class="video-page-right-footer flex">
        <el-input
          class="input-item"
          v-model="commentValue"
          :placeholder="isLogin ? '说点什么……' : '登录后评论'"
          @change="commentChange"
        >
          <template #prefix>
            <i v-if="!isLogin" class="iconfont icon-denglu"></i>
            <img
              v-else
              src="https://www.helloimg.com/i/2025/01/16/6788b0a363739.jpeg"
              class="profile_picture"
            />
          </template>
        </el-input>

        <div class="icon-box flex center">
          <div class="flex center">
            <i class="iconfont icon-aixin"></i>
            <span class="m_4">{{ props.video.thumbsUp }}</span>
          </div>
          <div class="flex center">
            <i class="iconfont icon-xingxing"></i>
            <span class="m_4">{{ props.video.collect }}</span>
          </div>
          <div class="flex center">
            <i class="iconfont icon-bianzu"></i>
            <span class="m_4">{{ props.video.reply.length }}</span>
          </div>
          <div class="flex center">
            <i class="iconfont icon-31zhuanfa"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, watch } from "vue";
import isLogin from "@/utils/isLogin.js";
import emmiter from "@/utils/event-bus.js";
import CommentList from "@/components/CommentList.vue";

const commentValue = ref("");

const props = defineProps({
  video: {
    type: Object,
    default: () => {},
  },
});

const comment = ref({ ...props.video });

watch(
  () => props.video,
  (newVal) => {
    comment.value = { ...newVal };
  },
  { deep: true }
);

const commentChange = () => {
  if (!isLogin) {
    // 弹出登录框
    emmiter.emit("loginShow", true);
    return;
  }

  const param = {
    id: props.video.reply.length + 1,
    name: "晓倩",
    content: commentValue.value,
    day: "1",
    img: "https://www.helloimg.com/i/2025/01/16/6788b0a363739.jpeg",
    addressCity: "广东",
    replyChildre: [],
  };

  comment.value.reply.push(param);
  commentValue.value = ""; // 清空输入框
};
</script>


<style lang="scss" scoped>
.video-page {
  .video-page-left {
    width: 50%;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .video-page-right {
    position: relative;
    flex: 1;
    padding: 16px;
    height: calc(100vh - 200px);

    &-top {
      justify-content: space-between;
      margin-bottom: 8px;
      &-left {
        img {
          height: 40px;
          width: 40px;
          border-radius: 50%;
        }

        span {
          padding-left: 12px;
          font-size: 16px;
          color: var(--color-secondary-label);
        }
      }

      &-right {
        width: 96px;
        line-height: 40px;
        cursor: pointer;
        user-select: none;
        white-space: nowrap;
        outline: none;
        background: none;
        border: none;
        text-align: center;
        border-radius: 100px;
        font-size: 16px;
        font-weight: 600;
        background-color: #ff2e4d;
        color: #fff;
      }
    }

    &-main {
      margin-bottom: 8px;
      border-bottom: 1px solid var(--color-border-bottom);
      &-title {
        color: var(--color-primary-label);
        margin-bottom: 8px;
        font-weight: 600;
        font-size: 18px;
        line-height: 140%;
      }
      &-content {
        margin-bottom: 8px;
        font-weight: 400;
        font-size: 16px;
        line-height: 150%;
        color: var(--color-primary-label);
        white-space: pre-wrap;
        overflow-wrap: break-word;
      }
      &-time {
        justify-content: space-between;
        margin: 16px 0;
        font-size: 14px;
        line-height: 120%;
        color: var(--color-tertiary-label);
      }
    }

    &-footer {
      position: fixed;
      bottom: 70px;
      height: 50px;
      width: 430px;
      border-top: 1px solid var(--color-border);
      justify-content: space-between;
      align-items: center;
      .input-item {
        flex: 1;
        color: var(--color-tertiary-label);
        font-size: 14px;

        i {
          font-size: 20px;
          font-weight: 600;
        }
      }

      .icon-box {
        margin-left: 8px;
        width: 50%;
        font-weight: 600;

        div {
          margin: 0 4px;
          color: var(--color-primary-label);
        }
      }

      .profile_picture {
        height: 20px;
        width: 20px;
        border-radius: 999px;
      }
    }
  }
}

::v-deep(.el-input) {
  --el-input-border-color: transparent;
  --el-input-focus-border-color: transparent;
  --el-input-hover-border-color: transparent;
}
::v-deep .el-input__wrapper {
  border-radius: 999px;
  padding-left: 16px;
  background: var(--color-active-background);
  border: none;
  height: 35px;
}
::v-deep(.el-input__inner) {
  color: var(--color-primary-label);
}

::v-deep .el-input__wrapper.is-focus {
  box-shadow: none;
}

::v-deep .el-input__wrapper.hover {
  box-shadow: none;
}
</style>